<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <div>
          <div class="list-title">当前城市</div>
          <div class="list-1">
              <div class="button" >
              {{this.$store.state.city}}
              </div>
          </div>
      </div>
      <div>
          <div class="list-title">热门城市</div>
          <div class="list-1">
              <div 
                class="button" 
                v-for="item of hotcities"
                :key="item.id"
                @click="clickChange(item.name)"
              >
                  {{item.name}}
              </div>           
          </div>
      </div>
      <div 
        v-for="(list,key) of cities" 
        :key="key"
        :ref="key"
      >
          <div class="list-title">{{key}}</div>
              <div 
                class="list-2-content"  
                v-for="innerlist of list" 
                :key="innerlist.id" 
                @click="clickChange(innerlist.name)"
              >
                  {{innerlist.name}}
              </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props:{
      cities:Object,
      hotcities:Array,
      letters:String
  },
  watch:{
      letters(){
          if(this.letters){
            let el=this.$refs[this.letters][0];
            this.scroll.scrollToElement(el);
          }
      }
  },
  methods:{
      clickChange(city){
          this.$store.commit('cityChange',city);
          this.$router.push('/')
      }
  },
  mounted(){
      this.scroll=new Bscroll(this.$refs.wrapper)
  }
 
}
</script>

<style scoped>
.wrapper{
    position: absolute;
    top:1.68rem;
    left:0;
    right:0;
    bottom:0;
    overflow: hidden;
}
.list-title{
    line-height: .54rem;
    background: #eee;
    border-bottom:1px solid rgba(202, 200, 200, 0.507);
    text-align: left;
    padding-left: .1rem;
}
.list-1{
    overflow: hidden;
    padding:.1rem 0;
}
.button{
    float: left;
    width:30%;
    border: .02rem solid #ccc;
    margin-left: .1rem;
    padding:.1rem 0;
    border-radius: .06rem;
    box-sizing: border-box;
}
.list-2-content{
    line-height: .54rem;
    text-align: left;
    padding-left: .1rem;
    border-bottom: .02rem solid #ccc;
}
</style>